<template>
  <div class="v-editor-select-rows g-flex g-ov-hidden">
    <div class="g-flex-1">
      <MDropdown
        v-for="(valueItem, index) of values"
        :key="index"
        :disabled="row.readonly || isModelDisabled"
        @click="currentInputIndex = index"
      >
        <div class="g-jc-sb g-pd-l-8 g-pointer">
          <div class="g-flex-1">
            {{ valueItem.value }}
          </div>
          <div
            v-if="selected && !row.readonly && !isModelDisabled"
            class="g-flex-0 g-pd-lr-4"
          >
            <img src="statics/icons/app/iconlist2.png" />
          </div>
        </div>
        <template #dropdown>
          <MDropdownMenuItem
            v-for="item in options"
            :key="item.value"
            class="g-one-line"
            @click="handleClickItem(item, index)"
          >
            {{ item.label }}
          </MDropdownMenuItem>
        </template>
      </MDropdown>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      class="_input-rows-operation-btns g-flex-0 g-lh-14 g-pd-4"
    >
      <div>
        <img
          src="statics/icons/propertyOperation/iconadd.png"
          class="g-pointer"
          @click="handleAdd"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/propertyOperation/iconreduce.png"
          class="g-pointer"
          @click="handleDelete"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/propertyOperation/iconup.png"
          class="g-pointer"
          @click="handleUp"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/propertyOperation/icondown.png"
          class="g-pointer"
          @click="handleDown"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow, PropertyDropdownOption } from "../../types";
import { modelService } from "@/modules/model/service";
import { ref, watch, reactive, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent } from "@/constants/Enums";
import { arrayEqual } from "@/util/common";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { reliabilitySelectOptionsMap } from "./ValueSpecificationTypes";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const values = reactive((props.row.value as number[]).map(it => ({ value: it.toString() })));
const options = reliabilitySelectOptionsMap.get(props.row.key) || [];
// const options = toRef(props.row, 'items');

// const optionsMap = toMap(options.value, 'value');
const currentInputIndex = ref<number>();
const saveValue = async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = values.map(it => it.value);
  if (arrayEqual(dto.value, props.row.value as number[])) {
    return;
  }
  let res = await modelService.updateModelProperty(dto);

  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
};

watch(
  () => props.row.value,
  () => {
    values.splice(0, values.length, ...(props.row.value as number[]).map(it => ({ value: it.toString() })));
  }
);

function handleClickItem(item: PropertyDropdownOption, index: number) {
  values[index].value = item.value;
  saveValue();
}

function handleAdd() {
  values.push({ value: props.row.items?.[0]?.value || "0" });
  currentInputIndex.value = values.length - 1;

  saveValue();
}

function handleDelete() {
  if (currentInputIndex.value === undefined) return;
  values.splice(currentInputIndex.value, 1);
  currentInputIndex.value = undefined;
  saveValue();
}

function handleUp() {
  if (currentInputIndex.value === undefined || currentInputIndex.value === 0) return;
  const cur = values[currentInputIndex.value];
  const pre = values[currentInputIndex.value - 1];
  values[currentInputIndex.value - 1] = cur;
  values[currentInputIndex.value] = pre;
  currentInputIndex.value--;
  saveValue();
}

function handleDown() {
  if (currentInputIndex.value === undefined || currentInputIndex.value === values.length - 1) return;
  const cur = values[currentInputIndex.value];
  const next = values[currentInputIndex.value + 1];
  values[currentInputIndex.value + 1] = cur;
  values[currentInputIndex.value] = next;
  currentInputIndex.value++;
  saveValue();
}
</script>
<style lang="scss" scoped>
.v-editor-select-rows {
  display: flex;
  .c-dropdown {
    border-bottom: 1px solid #ddd;
    &:last-of-type {
      border-bottom: 0;
    }
  }
  ._input-rows-operation-btns {
    border-left: 1px solid #ddd;
  }
}

._current-row {
  .v-editor-select-rows {
    .c-dropdown {
      &:last-of-type {
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style>
